<template>
	<view>
		<view >
			<HMfilterDropdown :menuTop="0" :filterData="filterData" :defaultSelected ="defaultSelected"  :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
			<!-- 占位 -->
			<view class="place"></view>
		</view>
		<!-- <view class="datajson">
			<view class="text">菜单数据index：</view>
			<view>
				<view class="index" v-for="(v,index) in indexArr" :key="index">
					<text class="item">{{index}}</text>:{{v|outData}}
				</view>
			</view>
			<view>
				<view class="text">菜单数据value：</view>
				<view class="value" v-for="(v,index) in valueArr" :key="index">
					<text class="item">{{index}}</text>:{{v|outData}}
				</view>
			</view>
		</view> -->
		
		
		<view style="width:100rpx;height:130rpx"></view>
		<navigator :url="`../xqfq/xqfq?id=${item.id}`" v-for="item in findData" :key="item.id"><view class="splb" style="margin-top:20rpx" >
			<view style="width:220rpx;height:100% ;">
				<image style="width:100%;height:100%" :src="item.photo" mode="aspectFill"></image>
			</view>
			<view style="width:300rpx;height: 100%; margin-left:20rpx">
				<view class="komeito">
					{{item.name.substring(0,15)}}...
				</view>
				<view class="san" style="margin-top:20rpx">
					<text style="font-size:20rpx;color: #9e9e9e;">磨砂合金|</text>
					<text style="font-size:20rpx;color: #9e9e9e;">磨砂合金|</text>
					<text style="font-size:20rpx;color: #9e9e9e;">育婴可用</text>
				</view>
				<view style="display: flex;margin-top:20rpx">
					<view class="aac" style="font-weight: 700;">
						精选
					</view>
					<view class="aab">
						热销Top
					</view>
				</view>
				<view style="margin-top:20rpx">
					<text style="color:red;font-size:20rpx">￥</text><text style="color:red;font-size: 40rpx;">{{item.price}}</text>
				</view>
			</view>
		</view></navigator>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,mapMutations,mapState
	} = createNamespacedHelpers('goods');
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import data from '../../components/common/data.js';//筛选菜单数据
	export default {
		components: {
			'HMfilterDropdown':HMfilterDropdown
		},
		data() {
			return {
				indexArr:'',
				valueArr:'',
                pricelaybel:'',
				//商品数据
			
				loadingText:"正在加载...",
				defaultSelected:[],
				filterData:[],
				goodsTypeId:"",
				keyword:''
			};
		}, 
		filters: {
		　　outData(value) {
		　　　　return JSON.stringify(value);
		　　}
		},
		onLoad (options) {
			this.goodsTypeId=options.id;
			this.keyword = options.keyword
		  // this.findDhop({goodsTypeId:options.id,pageNow:1,pageSize:100,pricelaybel:'1'});
			// 首页传过来的搜索关键字
			console.log('aa',options.keyword);
				this.findDhop({goodsTypeId:options.id,pageNow:1,pageSize:100,pricelaybel:'1'});
		  	setTimeout(()=>{
		  				this.filterData = data; 
		  			},100);
		},
		methods:{
			...mapActions(['findShop']),
			findDhop(data){
				this.findShop(data)
			},
			//接收菜单结果
			confirm(e){
				this.indexArr = e.index;
				this.valueArr = e.value;
				
			},
			//修改选中项-示例
			changeSelected(){
				this.defaultSelected = [];
				this.$nextTick(()=>{
					this.defaultSelected = [
						[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
						[null,null],			//第1个菜单选中 都不选中
						[1],					//第2个菜单选中 一级菜单的第1项
						[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
						[[0],[1],[1]]			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
					];
				})
			},
			//轮播图指示器
			swiperChange(event) {
				//this.currentSwiper = event.detail.current;
			},
		},
		computed:{
			...mapState(['findData','names'])
		},
		watch:{
			names(val){
				// console.log("新",newval,"旧",oldval)
				// console.log({goodsTypeId:options.id,pageNow:1,pageSize:100,pricelaybel:'1',name:''})
				if(val){
					this.findDhop({goodsTypeId:this.goodsTypeId,pageNow:1,pageSize:100,pricelaybel:'1',name:this.names});
				}else{
					 this.findDhop({goodsTypeId:this.goodsTypeId,pageNow:1,pageSize:100,pricelaybel:'1'});
				}
				
			}
		}
		
		
		
		
		
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		// onReachBottom(){
		// 	uni.showToast({title: '触发上拉加载'});
		// 	let len = this.goodsList.length;
		// 	if(len>=80){
		// 		this.loadingText="到底了";
		// 		return false;
		// 	}else{
		// 		this.loadingText="正在加载...";
		// 	}
		// 	let end_goods_id = this.goodsList[len-1].goods_id;
		// 	for(let i=1;i<=10;i++){
		// 		let goods_id = end_goods_id+i;
		// 		let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
		// 		this.goodsList.push(p);
		// 	}
		// },
	}
</script>
<style lang="scss">
 
	.aac{
			width: 56rpx;
			height: 26rpx;
			background-color: #f5610c;
			border-radius: 14rpx;
			font-size: 20rpx;
			line-height:26rpx;
			text-align: center;
			color:white;
			font-weight: 700;
	}
	.aab {
		font-size: 20rpx;
		line-height:26rpx;
		text-align: center;
		color:white;
		width: 104rpx;
		height: 26rpx;
		background-color: #f5610c;
		border-radius: 14rpx;
		margin-left:10rpx;
		margin-top:6rpx
	}
	.san{
		width:248rpx;
		height:26rpx
	}

	.komeito {
		width: 434rpx;
		height: 36rpx;
		// border:1px solid red;
		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 36rpx;
		letter-spacing: 0rpx;
		color: #3b3b3b;
		font-weight: 700;
	}
	.splb{
		display: flex;
		width:700rpx;
		height:220rpx;
		margin-left:50rpx
		
	}
.datajson{
	z-index: 2;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 250px;
	padding: 0 10px;
	background-color: rgba(255,255,255,.8);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	font-size: 12px;
	.text{
		margin-top: 10px;
	}
	.item{
		width: 15px;
	}
}
.place{
		background-color: #ffffff;
		height: 44px;
	}
	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 92%;
			height: 230rpx;
	
			overflow: hidden;
			border-radius: 15rpx;
			box-shadow: 0upx 8upx 25rpx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 230rpx;
				swiper-item {
					image {
						width: 100%;
						height: 230rpx;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}
.goods-list{
	padding-top: 10px;
		.loading-text{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30px;
			color: #979797;
			font-size: 12px;
		}
		.product-list{
			width: 92%;
			padding: 0 4% 3vw 4%; 
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.product{
				width: 48%;
				border-radius: 10px;
				background-color: #fff;
				margin: 0 0 7px 0;
				box-shadow: 0 3px 12px rgba(0,0,0,0.1);
				image{
					width: 100%;
					border-radius: 10px 10px 0 0;
				}
				.name{
					width: 92%;
					padding: 5px 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 15px;
				}
				.info{
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 5px 4% 5px 4%;
					.price{
						color: #e65339;
						font-size: 15px;
						font-weight: 600;
					}
					.slogan{
						color: #807c87;
						font-size: 12px;
					}
				}
			}
			
		}
	}
</style>
